<template>
  <el-col class="login">
    <el-col class="hidden-sm-and-down logoBg" :md="10" :lg="10" :xl="10"></el-col>
    <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="logofrom">
      <div class="logostyle">
        <el-col tag="strong">云匠荟进销存管理系统</el-col>
        <el-form
          :model="logo"
          ref="forms"
          label-width="120px"
          :rules="rules"
          @submit.native.prevent
        >
          <el-form-item label="账号：" prop="name">
            <el-input v-model="logo.name" maxlength="11">
              <i class="el-icon-user" slot="prefix"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="logo.password" type="password">
              <i class="el-icon-unlock" slot="prefix"></i>
            </el-input>
          </el-form-item>
          <el-col>
            <el-col :span="18">
              <el-form-item label="验证码：" prop="ver_code">
                <el-input v-model="logo.ver_code">
                  <i class="el-icon-key" slot="prefix"></i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <img :src="codeimg" alt="验证码" @click="updataimg" />
              <!-- <el-button type="warning" size="small" @click="getcode">获取验证码</el-button> -->
            </el-col>
          </el-col>
          <el-col>
            <el-button
              native-type="submit"
              type="primary"
              @click="onSubmit('forms')"
              size="small"
              v-loading="loading"
            >立即登录</el-button>
          </el-col>
        </el-form>
      </div>
    </el-col>
  </el-col>
</template>

<script>
export default {
  name: "logo",
  props: {
    msg: String
  },
  data() {
    return {
      loading: false,
      logo: {
        name: "",
        password: "",
        ver_code: "",
        time: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          // { type: "number", message: "必须为电话号码" }
          {
            pattern: /^0{0,1}(1[3-9][0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
            message: "手机号格式不对",
            trigger: "blur"
          }
        ],
        password: [{ required: true, message: "密码至少6位" }],
        ver_code: [{ required: true, message: "验证码不能为空" }]
      },
      codeimg: ""
    };
  },
  mounted() {
    this.codefn();
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          this.login();
        } else {
          // console.log(11);
          // console.log("error submit!!");
          return false;
        }
      });
    },
    login() {
      this.$store
        .dispatch("login", this.logo)
        .then(result => {
          this.loading = false;
          if (!result.code) {
            this.$message({
              type: "success",
              message: "登录成功"
            });
            let data = JSON.stringify(result.data);
            sessionStorage.setItem("user", data);
            this.$router.push({
              path: "/home/conter"
            });
          } else {
            this.codefn();
          }
        })
        .catch(() => {
          // console.log(err);
          this.loading = false;
        });
    },
    codefn() {
      //获取验证码
      let newdata = new Date().getTime();
      this.logo.time = newdata;
      this.codeimg =
        this.$baseUrl + "/api/admin/admin_ver_code?" + "time=" + this.logo.time;
    },
    updataimg() {
      this.codefn();
    },
    getcode() {}
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
